import { defineStore } from 'pinia'
import { store } from '@/store'
import { setCssVar, humpToUnderline, trim } from '@/utils'
import { ElMessage, ComponentSize } from 'element-plus'
import { useStorage } from '@/hooks/web/useStorage'
import { Dictionary } from '@/api/common/types'
import { useCssVar } from '@vueuse/core/index'
import { unref } from 'vue'
import { colorIsDark, hexToRGB, lighten } from '@/utils/color'
import { SystemSetting } from '@/api/system/setting/types'
import { SystemUserSetting } from '@/api/system/userSetting/types'

const { getStorage, setStorage } = useStorage()

interface AppState {
  settingId?: number
  userId?: number
  breadcrumb: boolean
  breadcrumbIcon: boolean
  collapse: boolean
  uniqueOpened: boolean
  hamburger: boolean
  screenfull: boolean
  size: boolean
  locale: boolean
  tagsView: boolean
  tagsViewIcon: boolean
  logo: boolean
  fixedHeader: boolean
  pageLoading: boolean
  layout: LayoutType
  title: string
  isDark: boolean
  currentSize: ComponentSize
  sizeMap: ComponentSize[]
  mobile: boolean
  footer: boolean
  theme: ThemeTypes
  fixedMenu: boolean
  systemThemeColor: string
  headerThemeColor: string
  menuThemeColor: string
}

export const useAppStore = defineStore('app', {
  state: (): AppState => {
    return {
      settingId: undefined,
      userId: undefined,
      sizeMap: ['default', 'large', 'small'],
      mobile: false, // 是否是移动端
      title: import.meta.env.VITE_APP_TITLE, // 标题
      pageLoading: false, // 路由跳转loading

      breadcrumb: true, // 面包屑
      breadcrumbIcon: true, // 面包屑图标
      collapse: false, // 折叠菜单
      uniqueOpened: false, // 是否只保持一个子菜单的展开
      hamburger: true, // 折叠图标
      screenfull: true, // 全屏图标
      size: false, // 尺寸图标
      locale: false, // 多语言图标
      tagsView: true, // 标签页
      tagsViewIcon: true, // 是否显示标签图标
      logo: true, // logo
      fixedHeader: true, // 固定toolheader
      footer: true, // 显示页脚
      fixedMenu: getStorage('fixedMenu') || false, // 是否固定菜单

      layout: getStorage('layout') || 'classic', // layout布局
      isDark: getStorage('isDark') || false, // 是否是暗黑模式
      currentSize: getStorage('default') || 'default', // 组件尺寸
      theme: getStorage('theme') || {
        // 主题色
        elColorPrimary: '#409eff',
        // 左侧菜单边框颜色
        leftMenuBorderColor: 'inherit',
        // 左侧菜单背景颜色
        leftMenuBgColor: '#001529',
        // 左侧菜单浅色背景颜色
        leftMenuBgLightColor: '#0f2438',
        // 左侧菜单选中背景颜色
        leftMenuBgActiveColor: 'var(--el-color-primary)',
        // 左侧菜单收起选中背景颜色
        leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
        // 左侧菜单字体颜色
        leftMenuTextColor: '#bfcbd9',
        // 左侧菜单选中字体颜色
        leftMenuTextActiveColor: '#fff',
        // logo字体颜色
        logoTitleTextColor: '#fff',
        // logo边框颜色
        logoBorderColor: 'inherit',
        // 头部背景颜色
        topHeaderBgColor: '#fff',
        // 头部字体颜色
        topHeaderTextColor: 'inherit',
        // 头部悬停颜色
        topHeaderHoverColor: '#f6f6f6',
        // 头部边框颜色
        topToolBorderColor: '#eee'
      },
      systemThemeColor: '#409eff',
      headerThemeColor: '#fff',
      menuThemeColor: '#fff'
    }
  },
  getters: {
    getSettingId(): number | undefined {
      return this.settingId ?? undefined
    },
    getUserId(): number | undefined {
      return this.userId ?? undefined
    },
    getBreadcrumb(): boolean {
      return this.breadcrumb
    },
    getBreadcrumbIcon(): boolean {
      return this.breadcrumbIcon
    },
    getCollapse(): boolean {
      return this.collapse
    },
    getUniqueOpened(): boolean {
      return this.uniqueOpened
    },
    getHamburger(): boolean {
      return this.hamburger
    },
    getScreenfull(): boolean {
      return this.screenfull
    },
    getSize(): boolean {
      return this.size
    },
    getLocale(): boolean {
      return this.locale
    },
    getTagsView(): boolean {
      return this.tagsView
    },
    getTagsViewIcon(): boolean {
      return this.tagsViewIcon
    },
    getLogo(): boolean {
      return this.logo
    },
    getFixedHeader(): boolean {
      return this.fixedHeader
    },
    getFixedMenu(): boolean {
      return this.fixedMenu
    },
    getPageLoading(): boolean {
      return this.pageLoading
    },
    getLayout(): LayoutType {
      return this.layout
    },
    getTitle(): string {
      return this.title
    },
    getIsDark(): boolean {
      return this.isDark
    },
    getCurrentSize(): ComponentSize {
      return this.currentSize
    },
    getSizeMap(): ComponentSize[] {
      return this.sizeMap
    },
    getMobile(): boolean {
      return this.mobile
    },
    getTheme(): ThemeTypes {
      return this.theme
    },
    getFooter(): boolean {
      return this.footer
    },
    getSystemThemeColor(): string {
      return this.systemThemeColor
    },
    getHeaderThemeColor(): string {
      return this.headerThemeColor
    },
    getMenuThemeColor(): string {
      return this.menuThemeColor
    },
    getDictionaryList(): Dictionary[] {
      return getStorage('dictionaryList')
    },
    getSystemSetting(): SystemSetting {
      return getStorage('systemSetting')
    }
  },
  actions: {
    setSettingId(settingId: number | undefined) {
      this.settingId = settingId
    },
    setUserId(userId: number | undefined) {
      this.userId = userId
    },
    setBreadcrumb(breadcrumb: boolean) {
      this.breadcrumb = breadcrumb
    },
    setBreadcrumbIcon(breadcrumbIcon: boolean) {
      this.breadcrumbIcon = breadcrumbIcon
    },
    setCollapse(collapse: boolean) {
      this.collapse = collapse
    },
    setUniqueOpened(uniqueOpened: boolean) {
      this.uniqueOpened = uniqueOpened
    },
    setHamburger(hamburger: boolean) {
      this.hamburger = hamburger
    },
    setScreenfull(screenfull: boolean) {
      this.screenfull = screenfull
    },
    setTagsView(tagsView: boolean) {
      this.tagsView = tagsView
    },
    setTagsViewIcon(tagsViewIcon: boolean) {
      this.tagsViewIcon = tagsViewIcon
    },
    setLogo(logo: boolean) {
      this.logo = logo
    },
    setFixedHeader(fixedHeader: boolean) {
      this.fixedHeader = fixedHeader
    },
    setFixedMenu(fixedMenu: boolean) {
      setStorage('fixedMenu', fixedMenu)
      this.fixedMenu = fixedMenu
    },
    setPageLoading(pageLoading: boolean) {
      this.pageLoading = pageLoading
    },
    setLayout(layout: LayoutType) {
      if (this.mobile && layout !== 'classic') {
        ElMessage.warning('移动端模式下不支持切换其它布局')
        return
      }
      this.layout = layout
    },
    setTitle(title: string) {
      this.title = title
    },
    setIsDark(isDark: boolean) {
      this.isDark = isDark
      if (this.isDark) {
        document.documentElement.classList.add('dark')
        document.documentElement.classList.remove('light')
      } else {
        document.documentElement.classList.add('light')
        document.documentElement.classList.remove('dark')
      }
      setStorage('isDark', this.isDark)
    },
    setCurrentSize(currentSize: ComponentSize) {
      this.currentSize = currentSize
      setStorage('currentSize', this.currentSize)
    },
    setMobile(mobile: boolean) {
      this.mobile = mobile
    },
    setTheme(theme: ThemeTypes) {
      this.theme = Object.assign(this.theme, theme)
      setStorage('theme', this.theme)
    },
    setCssVarTheme() {
      for (const key in this.theme) {
        setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
      }
    },
    setFooter(footer: boolean) {
      this.footer = footer
    },
    setSystemThemeColor(systemThemeColor: string) {
      this.systemThemeColor = systemThemeColor
    },
    setHeaderThemeColor(headerThemeColor: string) {
      this.headerThemeColor = headerThemeColor
    },
    setMenuThemeColor(menuThemeColor: string) {
      this.menuThemeColor = menuThemeColor
    },
    setUserConfig(systemUserSetting: SystemUserSetting) {
      this.userId = systemUserSetting.userId
      this.settingId = systemUserSetting.settingId
      this.layout = systemUserSetting.layoutType
      this.setLayout(systemUserSetting.layoutType)
      this.isDark = systemUserSetting.darkMode
      this.setIsDark(systemUserSetting.darkMode)
      this.setMenuTheme(systemUserSetting.menuThemeColor)
      this.setSystemTheme(systemUserSetting.systemThemeColor)
      this.setHeaderTheme(systemUserSetting.headerThemeColor)
      this.setTheme(this.theme)
      this.breadcrumb = systemUserSetting.showBreadcrumb
      this.breadcrumbIcon = systemUserSetting.showBreadcrumbIcon
      this.tagsView = systemUserSetting.showTagsView
      this.tagsViewIcon = systemUserSetting.showTagsViewIcon
      this.uniqueOpened = systemUserSetting.showUniqueOpened
      this.fixedHeader = systemUserSetting.fixedHeader
      this.fixedMenu = systemUserSetting.fixedMenu
      this.setMenuThemeColor(systemUserSetting.menuThemeColor)
      this.setHeaderThemeColor(systemUserSetting.headerThemeColor)
      this.setSystemThemeColor(systemUserSetting.systemThemeColor)
    },
    setSystemConfig(systemSetting: SystemSetting) {
      this.logo = systemSetting.showLogo
      this.footer = systemSetting.showFooter
      this.screenfull = systemSetting.showScreenFull
      this.hamburger = systemSetting.showHamburger
      setStorage('systemSetting', systemSetting)
    },
    setSystemTheme(color: string) {
      setCssVar('--el-color-primary', color)
      this.theme.elColorPrimary = color
      const leftMenuBgColor = useCssVar('--left-menu-bg-color', document.documentElement)
      this.setMenuTheme(trim(unref(leftMenuBgColor)))
    },
    setMenuTheme(color: string) {
      color = trim(unref(color))
      const primaryColor = useCssVar('--el-color-primary', document.documentElement)
      const isDarkColor = colorIsDark(color)
      this.theme.leftMenuBorderColor = isDarkColor ? 'inherit' : '#eee'
      this.theme.leftMenuBgColor = color
      this.theme.leftMenuBgLightColor = isDarkColor ? lighten(color!, 6) : color
      this.theme.leftMenuBgActiveColor = isDarkColor
        ? 'var(--el-color-primary)'
        : hexToRGB(unref(primaryColor), 0.1)
      this.theme.leftMenuCollapseBgActiveColor = isDarkColor
        ? 'var(--el-color-primary)'
        : hexToRGB(unref(primaryColor), 0.1)
      this.theme.leftMenuTextColor = isDarkColor ? '#bfcbd9' : '#333'
      this.theme.leftMenuTextActiveColor = isDarkColor ? '#fff' : 'var(--el-color-primary)'
      this.theme.logoTitleTextColor = isDarkColor ? '#fff' : 'inherit'
      this.theme.logoBorderColor = isDarkColor ? color : '#eee'
      this.setCssVarTheme()
    },
    setHeaderTheme(color: string) {
      const isDarkColor = colorIsDark(color)
      const textColor = isDarkColor ? '#fff' : 'inherit'
      const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
      const topToolBorderColor = isDarkColor ? color : '#eee'
      setCssVar('--top-header-bg-color', color)
      setCssVar('--top-header-text-color', textColor)
      setCssVar('--top-header-hover-color', textHoverColor)
      this.theme.topHeaderBgColor = color
      this.theme.topHeaderTextColor = textColor
      this.theme.topHeaderHoverColor = textHoverColor
      this.theme.topToolBorderColor = topToolBorderColor
      if (unref(this.layout) === 'top') {
        this.setMenuTheme(color)
      }
    },
    setDictionaryList(dictionaryList: Dictionary[]) {
      setStorage('dictionaryList', dictionaryList)
    }
  },
  persist: {
    storage: sessionStorage
  }
})

export const useAppStoreWithOut = () => {
  return useAppStore(store)
}

export const setMenuTheme1 = (color: string) => {
  const primaryColor = useCssVar('--el-color-primary', document.documentElement)
  const isDarkColor = colorIsDark(color)
  const theme: ThemeTypes = {
    // 左侧菜单边框颜色
    leftMenuBorderColor: isDarkColor ? 'inherit' : '#eee',
    // 左侧菜单背景颜色
    leftMenuBgColor: color,
    // 左侧菜单浅色背景颜色
    leftMenuBgLightColor: isDarkColor ? lighten(color!, 6) : color,
    // 左侧菜单选中背景颜色
    leftMenuBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单收起选中背景颜色
    leftMenuCollapseBgActiveColor: isDarkColor
      ? 'var(--el-color-primary)'
      : hexToRGB(unref(primaryColor), 0.1),
    // 左侧菜单字体颜色
    leftMenuTextColor: isDarkColor ? '#bfcbd9' : '#333',
    // 左侧菜单选中字体颜色
    leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
    // logo字体颜色
    logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
    // logo边框颜色
    logoBorderColor: isDarkColor ? color : '#eee'
  }
  return theme
}
